<style lang="less" scoped>
    .qrcode {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        flex-direction: column;
        .main {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            margin-top: 40px;
            h1{
                font-size: 3em;
                font-weight: 900;
            }
            h2{
                font-size: 30px;
            }
            #shengchan, #baozhuang {
                height: 600px;
                width: 600px;
                border: 1px solid #ddd;
            }
            #baozhuang {
                margin-left: 20px;
            }
        }
    }
</style>
<template>
    <div class="qrcode">
        <div class="btn">
            <Button @click="test">Default</Button>
        </div>
        <div class="main">
            <div id="shengchan">
                <div style="display: flex;justify-content:space-between;width: 100%;padding: 5px 10px;">
                    <h1>{{ data.nub }}</h1>
                    <h1>{{ data.name }}</h1>
                    <h1>{{ data.cnumber }}</h1>
                </div>
                <div style="display: flex;padding: 5px 10px">
                    <img :src="data.photoUrl1" alt="qrcode" width="150px;" height="150px">
                    <div style="font-size: 16px;font-weight: 900;margin-left: 50px;line-height: 30px;text-align: left">
                        <p>规格:{{ data.norm }}</p>
                        <p>颜色:{{ data.color }}</p>
                        <p>类型:{{ data.type }}</p>
                        <p>单位:{{ data.unit }}</p>
                        <p>图号:{{ data.version }}</p>
                    </div>
                </div>
                <div style="display: flex;padding: 5px 20px">
                    <h2>机种:
                        <span v-for="item in data.machine" style="margin-left: 5px">{{ item }}</span>
                    </h2>
                </div>
            </div>
            <div id="baozhuang">

            </div>
        </div>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    export default {
        name: 'qrcode',
        props: ['id'],
        data () {
            return {
                data: {}
            }
        },
        watch: {
        },
        methods: {
            test () {
                /*let global_Html = document.body.innerHTML;
                document.body.innerHTML = document.getElementById('shengchan').innerHTML;
                window.print();
                window.setTimeout(function() {
                    document.body.innerHTML = global_Html;
                }, 1000);*/
                window.open('http://192.168.1.7:8080/#/shengchan/work3')
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            this.http.getAllQRCode(this, {id: this.$route.params.id})
        }
    };
</script>
